{{#linked-block
  (concat
    "vault.cluster.secrets.backend."
    "credentials"
    (unless @item.id "-root")
  )
  @item.backend
  @item.id
  queryParams=(hash action="issue")
  class="list-item-row"
  data-test-secret-link=@item.id
  tagName="div"
  encode=true
}}
  <div class="columns is-mobile">
    <div class="column is-10">
      <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root") }} @model={{@item.id}} @query={{hash action="issue"}} class="has-text-black has-text-weight-semibold">
      <Icon
        @glyph="user-square-outline"
        class="has-text-grey-light is-pulled-left"
      />
      <div class="role-item-details">
        <span class="is-underline">{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}}</span>
      </div>
      </LinkTo>
    </div>
    <div class="column has-text-right">
      <PopupMenu @name="role-aws-nav">
        <Confirm as |c|>
          <nav class="menu">
            {{#if (or @item.generatePath.isPending @item.signPath.isPending)}}
              <ul class="menu-list">
                <li class="action">
                  <button disabled type="button" class="link button is-loading is-transparent">
                    loading
                  </button>
                </li>
              </ul>
            {{else if (or @item.canGenerate @item.canSign)}}
              <ul class="menu-list">
                {{#if @item.canGenerate}}
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} @query={{hash action="issue"}} data-test-role-pki-link="generate-certificate">
                      Generate certificate
                    </LinkTo>
                  </li>
                {{/if}}
                {{#if @item.canSign}}
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} @query={{hash action="sign"}} data-test-role-pki-link="sign-certificate">
                      Sign certificate
                    </LinkTo>
                  </li>
                {{/if}}
              </ul>
            {{/if}}
            <ul class="menu-list">
              {{#if @item.updatePath.isPending}}
                <li class="action">
                  <button disabled type="button" class="link button is-loading is-transparent">
                    loading
                  </button>
                </li>
                <li class="action">
                  <button disabled type="button" class="link button is-loading is-transparent">
                    loading
                  </button>
                </li>
              {{else}}
                {{#if @item.canRead}}
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-pki-link="show">
                      Details
                    </LinkTo>
                  </li>
                {{/if}}
                {{#if @item.canEdit}}
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-pki-link="edit">
                      Edit
                    </LinkTo>
                  </li>
                {{/if}}
                {{#if @item.canDelete}}
                  <li class="action">
                    <c.Message
                    @id={{@item.id}}
                    @onConfirm={{@delete}}
                    data-test-pki-role-delete={{@item.id}}/>
                  </li>
                {{/if}}
              {{/if}}
            </ul>
          </nav>
        </Confirm>
      </PopupMenu>
    </div>
  </div>
{{/linked-block}}
